<template>
    <div style="height: 100%;width: 100%">
        <h4 class="page-name">轨迹分析</h4>
        <div class="right-params-form">
            <el-form ref="form" :model="paramForm">
                <el-form-item>
                    <el-input v-model="paramForm.flightLine"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-col :span="11">
                        <el-date-picker type="date" v-model="paramForm.startTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" v-model="paramForm.endTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col :span="11">
                        <el-input v-model="paramForm.latitudeStart" placeholder="起始经度"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="paramForm.latitudeEnd" placeholder="结束经度"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col :span="11">
                        <el-input v-model="paramForm.longitudeStart" placeholder="起始纬度"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="paramForm.longitudeEnd" placeholder="结束纬度"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getData">确定</el-button>
                </el-form-item>
            </el-form>
          <!--  <div class="check-box">
                <div style="display: flex;    justify-content: space-between; margin-bottom: 15px">
                    <span>查询结果</span>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                </div>
                <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
                    <el-checkbox v-for="(item,index) in allData" :label="index" :value="index" :key="index">
                        {{item.flightLine}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>-->
        </div>

            <el-button  v-show="prdictBtnVisible" id="predictBtn" class="alert-btn" @click="predict">开始预测</el-button>

    </div>

</template>

<script>
    import startship from "./../assets/imgs/predict/chuan.png";
    import endgreenship from "./../assets/imgs/predict/dingwie .png";
    import endyellowship from "./../assets/imgs/predict/dingwei2.png";
    import endredship from "./../assets/imgs/predict/dingwei3.png";
    import predictship from "./../assets/imgs/navigation-log/predictship.png";
    import yellowCircle from "./../assets/imgs/navigation-log/yellow-circle.png";
    import whitecircle from "./../assets/imgs/navigation-log/white-circle.png";
    import yellowcircle from "./../assets/imgs/navigation-log/yellow-circle.png";
    import redcircle from "./../assets/imgs/navigation-log/hong-circle.png";
    import * as request from "../http/request.js"
    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'

    export default {
        name: 'predict1',
        data() {
            return {
                radio1: '历史数据引导轨迹预测',
                tishiImg: require('../assets/imgs/predict/tishi2.png'),
                timeArr: null,
                paramForm:{
                    "startTime":"2023-02-01",
                    "endTime":"2024-03-01",
                    "longitudeStart":"118",
                    "longitudeEnd":"119",
                    "latitudeStart":"23",
                    "latitudeEnd":"25",
                    "flightLine":""
                },
                initData:[],
                checkList: [],
                checkAll: false,
                isIndeterminate: true,
                viewer: null,
                allData: [],
                checkData: [],
                flightData: [],
                curFlightId: '',
                dialogFormVisible: false,
                mapDetailVisible: false,
                mapDetail: {
                    shipNameChi: '',
                    hullNum: '',
                    posDatetime: "2023-06-01T00:11:33",
                    shipUsage: "保障",
                    speed: ''
                },
                prdictBtnVisible: false,
                similarParam: {
                    flightLine: "",
                    flightLineComparision: []
                },
            }
        },
        mounted() {
            // viewer.timeline.container.style.visibility = 'hidden' // 不显示动画控件
            viewer.entities.removeAll()
            this.getData()
        },
        methods: {
            getData() {
                let _self = this
                request.getmodelFlight(this.paramForm).then(function (res) {
                _self.initData = res.data.data
                    _self.loadInitData()
                })
            },
            loadInitData() {
                debugger
                let data = this.initData
                for (let i = 0; i < data.length; i++) {
                    let flight = data[i].flight
                    let lineData = [];
                    for (let i = 0; i < flight.length; i++) {
                        lineData.push(flight[i].coordinate[0]);
                        lineData.push(flight[i].coordinate[1]);
                    }
                    viewer.entities.add({
                        name: "航迹起点",
                        position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                        billboard: {
                            //图标
                            image: startship,
                            width: 29,
                            height: 29,
                            // rotation: Cesium.Math.toRadians(flight[0].track),
                        },
                    });
                    for (let k = 1; k < flight.length - 1; k++) {
                        viewer.entities.add({
                            name: "航迹坐标点",
                            position: Cesium.Cartesian3.fromDegrees(flight[k].coordinate[0], flight[k].coordinate[1]),
                            billboard: {
                                //图标
                                image: whitecircle,
                                width: 10,
                                height: 10,
                                // rotation: Cesium.Math.toRadians(flight[k].track),
                            },
                            attribute: {
                                shipNameChi: data[i].shipNameChi,
                                hullNum: data[i].hullNum,
                                speed: flight[k].speed,
                                posDatetime: flight[k].posDatetime,//定位时间
                                shipUsage: flight[k].shipUsage,//舰船用途
                                id: data[i].flightLine
                            }
                        })
                    }
                    viewer.entities.add({
                        name: "航迹线",
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                            arcType: Cesium.ArcType.RHUMB,
                            width: 2,
                            material: Cesium.Color.fromCssColorString('#63CDFF')
                        },
                        attribute: {
                            id: data[i].flightLine,
                        }
                    })
                    viewer.entities.add({
                        name: "航迹终点",
                        position: Cesium.Cartesian3.fromDegrees(flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]),
                        billboard: {
                            //图标
                            image:endgreenship ,
                            width: 29,
                            height: 29,
                            /*rotation: Cesium.Math.toRadians(flight[flight.length - 1].track),*/
                        },
                        attribute: {
                            uuid: data[i].mmsi,
                            flightLine: data[i].flightLine,
                            categories: 'ship',
                            type: '',
                        }
                    });

                }
                console.log(data)
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                let _self = this;
                handler.setInputAction(function (e) {

                    let currentTarget = viewer.scene.pick(e.position);
                    if (viewer.scene.pickPositionSupported && Cesium.defined(currentTarget)) {
                        if (currentTarget.id.name == '航迹坐标点' || currentTarget.id.name == '航迹线') {
                            _self.mapDetailVisible = true;
                            _self.mapDetail = {
                                shipNameChi: currentTarget.id.attribute.shipNameChi,
                                hullNum: currentTarget.id.attribute.hullNum,
                                posDatetime: currentTarget.id.attribute.posDatetime,
                                shipUsage: currentTarget.id.attribute.shipUsage,
                                speed: currentTarget.id.attribute.speed
                            }

                            console.log(_self.mapDetail)
                            let element = document.getElementById('mapDetail');
                            //笛卡尔坐标转为屏幕坐标
                            // let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, e.position);
                            element.style.top = (e.position.y + 10) + 'px';
                            element.style.left = (e.position.x + 10) + 'px';

                        } else if (currentTarget.id.name == '航迹终点') {
                            _self.prdictBtnVisible = true
                            let element1 = document.getElementById('predictBtn');
                            element1.style.top = (e.position.y + 10) + 'px';
                            element1.style.left = (e.position.x + 10) + 'px';
                            _self.paramForm = currentTarget.id.attribute
                            _self.similarParam.flightLine = currentTarget.id.attribute.flightLine
                        } else {
                            _self.mapDetail = {};
                            _self.mapDetailVisible = false;
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            handleShipData(data, color) {
                let endicon, circleColor, iconcolor;
                if (color == 'green') {
                    endicon = endgreenship
                    iconcolor = '#63CDFF'
                    circleColor = whitecircle
                } else if (color == 'red') {
                    endicon = endredship
                    iconcolor = '#FF5F5F'
                    circleColor = redcircle
                } else  {
                    endicon = endyellowship
                    iconcolor = '#EAE23B'
                    circleColor = yellowCircle
                }
                let flight = data.flight
                let lineData = [];
                for (let i = 0; i < flight.length; i++) {
                    lineData.push(flight[i].coordinate[0]);
                    lineData.push(flight[i].coordinate[1]);
                }
                viewer.entities.add({
                    name: "航迹起点",
                    position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                    billboard: {
                        //图标
                        image: startship,
                        width: 29,
                        height: 29,
                        /*rotation: Cesium.Math.toRadians(flight[0].track),*/
                    },
                });
                for (let k = 1; k < flight.length - 1; k++) {
                    viewer.entities.add({
                        name: "航迹坐标点",
                        position: Cesium.Cartesian3.fromDegrees(flight[k].coordinate[0], flight[k].coordinate[1]),
                        billboard: {
                            //图标
                            image: circleColor,
                            width: 8,
                            height: 8,
                        },
                        attribute: {
                            shipNameChi: data.shipNameChi,
                            hullNum: data.hullNum,
                            speed: flight.speed,
                            posDatetime: flight.posDatetime,//定位时间
                            shipUsage: flight.shipUsage,//舰船用途
                            id: data.flightLine
                        }
                    })
                }
                viewer.entities.add({
                    name: "航迹线",
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                        arcType: Cesium.ArcType.RHUMB,
                        width: 2,
                        material: Cesium.Color.fromCssColorString(iconcolor),
                    },
                    attribute: {
                        id: data.flightLine,
                    }
                })
                viewer.entities.add({
                    name: "航迹终点",
                    position: Cesium.Cartesian3.fromDegrees(flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]),
                    billboard: {
                        //图标
                        image: endicon,
                        width: 29,
                        height: 29,
                        /*rotation: Cesium.Math.toRadians(flight[flight.length - 1].track),*/
                    },
                    attribute: {
                        uuid: data.mmsi,
                        flightLine: data.flightLine,
                        categories: 'ship',
                        type: '',
                    }
                });

                console.log(data)
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                let _self = this;
                handler.setInputAction(function (e) {

                    let currentTarget = viewer.scene.pick(e.position);
                    if (viewer.scene.pickPositionSupported && Cesium.defined(currentTarget)) {
                        if (currentTarget.id.name == '航迹坐标点' || currentTarget.id.name == '航迹线') {
                            _self.mapDetailVisible = true;
                            _self.mapDetail = {
                                shipNameChi: currentTarget.id.attribute.shipNameChi,
                                hullNum: currentTarget.id.attribute.hullNum,
                                posDatetime: currentTarget.id.attribute.posDatetime,
                                shipUsage: currentTarget.id.attribute.shipUsage,
                                speed: currentTarget.id.attribute.speed
                            }

                            console.log(_self.mapDetail)
                            let element = document.getElementById('mapDetail');
                            //笛卡尔坐标转为屏幕坐标
                            // let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, e.position);
                            element.style.top = (e.position.y + 10) + 'px';
                            element.style.left = (e.position.x + 10) + 'px';

                        } else if (currentTarget.id.name == '航迹终点') {
                            _self.prdictBtnVisible = true
                            let element1 = document.getElementById('predictBtn');
                            element1.style.top = (e.position.y + 10) + 'px';
                            element1.style.left = (e.position.x + 10) + 'px';
                            _self.paramForm = currentTarget.id.attribute
                            _self.similarParam.flightLine = currentTarget.id.attribute.flightLine
                        } else {
                            _self.mapDetail = {};
                            _self.mapDetailVisible = false;
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            predict() {
                this.prdictBtnVisible = false
                let _self = this
                request.modelPredict(this.paramForm).then(function (res) {
                    if (res.data.data) {
                        _self.handlePredict(res.data.data)
                    } else {
                        _self.$message.error(res.data.errMsg);
                    }
                })
            },
            handlePredict(data) {
                let flight = data.flight
                let lineData = [];
                for (let i = 0; i < flight.length; i++) {
                    lineData.push(flight[i].coordinate[0]);
                    lineData.push(flight[i].coordinate[1]);
                }
                for (let i = 0; i < flight.length; i++) {
                    viewer.entities.add({
                        name: "预测坐标点",
                        position: Cesium.Cartesian3.fromDegrees(flight[i].coordinate[0], flight[i].coordinate[1]),
                        ellipse: {
                            semiMinorAxis: 1,
                            show: true,
                            material: Cesium.Color.fromCssColorString('#fffe4e')  //资源地址
                        },
                    })
                }
                viewer.entities.add({
                    name: "预测终点",
                    position: Cesium.Cartesian3.fromDegrees(flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]),
                    billboard: {
                        //图标
                        image: predictship,
                        width: 29,
                        height: 29,
                    },
                });
                viewer.entities.add({
                    name: "预测线",
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                        width: 2,
                        arcType: Cesium.ArcType.RHUMB,
                        material: new Cesium.PolylineDashMaterialProperty({
                            color: Cesium.Color.fromCssColorString('#fffe4e'),
                        }),
                        clampToGround: true
                    }
                })
            },

            handleCheckedChange(value, index) {
                viewer.entities.removeAll()
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.allData.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
                console.log(this.checkList)
                this.checkData = []
                for (let i = 0; i < this.checkList.length; i++) {
                    // this.checkData.push(this.allData[this.checkList[i]])
                    if (this.checkList[i] == 0) { //原始
                        this.handleShipData(this.allData[this.checkList[i]], 'green')
                    } else if (this.checkList[i] == this.checkList.length - 1) { //原始
                        this.handleShipData(this.allData[this.checkList[i]], 'red')
                    } else {
                        this.handleShipData(this.allData[this.checkList[i]], 'yellow')
                    }
                }

            },
            handleCheckAllChange(val) {
                this.checkList = val ? this.allData : [];
                this.isIndeterminate = false;
            },
        },
    }
</script>

<style lang="scss" scoped>
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: #5B82BC;
    $text-color: #ffffff;
    .page-name {
        position: absolute;
        top: 30px;
        left: 30px;
        padding: 5px 30px 5px 10px;
        border-radius: 3px;
        color: #fff;
        background: url("../assets/imgs/navigation-log/shijianzhou_bg.png");
    }

    .el-radio-group {
        position: absolute;
        top: 50px;
        right: 20px;
        background: url("../assets/imgs/predict/daohangbg.png");
        background-size: 100% 100%;
    }

    .tishi-img {
        position: absolute;
        left: 20px;
        top: 50%;
    }

    .tishi-img1 {
        position: absolute;
        right: 20px;
        top: 50%;
    }

    .right-params-form {
        position: absolute;
        right: 20px;
        top: 150px;
        width: 280px;
        background: url("../assets/imgs/predict/sousuobg.png");
        background-size: 100% 100%;
        padding: 40px 20px;

        ::v-deep .el-form-item {
            margin-bottom: 12px;

            .el-form-item__content, .el-input__icon {
                line-height: 30px;
                color: #fff;
            }

            .el-input__inner {
                background-color: rgba(255, 255, 255, 0.2);
                height: 30px;
                line-height: 30px;
                border: none;
                color: #fff;
            }

            .el-button--primary {
                background-color: #a0a6ac33;
                border-color: #00F6FF;
            }
        }

        .check-box {
            height: auto;
            margin-top: 20px;

            ::v-deep .el-checkbox {
                color: #fff;
                text-align: left;
                margin-right: 0px;
            }

            .el-checkbox-group {
                text-align: left;
            }

            .el-checkbox:last-of-type {
                margin-right: 0;
            }

            span {
                color: #fff;
                background: url("../assets/imgs/predict/yucebg.png");
                background-size: 100% 100%;
            }
        }
    }

    /*标识*/
    .biaoshi {
        position: absolute;
        top: 50%;
        left: 20px;

        img {
            width: 100px;
        }
    }

    /*    参数表单*/
    .params-form {
        position: absolute;
        right: 20px;

        .el-form-item__label {
            color: #fff;
        }

        .el-form-item__content {
            width: 130px;
        }

        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 135px;
        }
    }

    ::v-deep .el-form--inline .el-form-item__content {
        width: 350px;
    }

    #predictBtn {
        position: absolute;
        background: #017ec8;
        color: #fff;
        border: none;
        padding: 10px;
        border-radius: 4px;

        .alert-btn {
            padding: 5px;
        }
    }

    /*弹框*/
    ::v-deep .el-dialog {
        background: url("../assets/imgs/jicheng_tc_bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 10px;
        width: 400px;

        .el-dialog__header {
            padding: 0;
        }

        .el-dialog__title {
            color: #fff;
            float: left;
            margin-left: 20px;
        }

        .el-button {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: none;
        }

        .el-button:focus,
        .el-button:hover {
            background: #00c1d6;
        }

        .el-dialog__body {
            text-align: center;
            margin-top: 60px;
            padding: 0;
            padding-left: 15px;
        }

        .el-dialog__title {
            color: #fff;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
        }

    }


    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 6px;
        background-color: #fff;
    }

    // /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background: $item-bg-color;
    }

    // /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background-color: #33B2FF;
        border-radius: 4px;
    }
</style>

